<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.obox{
				height: 100vh;
				background: url(img/bj.png) 0px 0px/cover;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.box-l{
				width: 440px;
				height: 615px;
				border: solid 1px black;
				border-image: url(img/border.png) 47/40px repeat;
				background: rgb(255,85,5);
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 15px;
			}
			.box-title{
				width: 324px;
				height: 70px;
				background: url(img/1.png) 0px 0px/100% 100%;
				position: absolute;
				top: -35px;
				left: 50%;
				margin-left: -162px;
				font-size: 40px;
				color: white;
				text-align: center;
				line-height: 70px;
			}
			.content-list{
				width: 384px;
				height: 520px;
				position: relative;
				top: 10px;
				overflow: hidden;
			}
			.content-list ul{
				width: 405px;
				height: 100%;
				overflow: auto;
			}
			.content-list li{
				width: 384px;
				height: 100px;
				background: white;
				border-radius: 10px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 15px;
			}
			.content-list img{
				height: 70px;
				margin: 0px 10px;
			}
			.content-list h3{
				color: red;
			}
			.box-r{
				width: 600px;
				height: 598px;
				background: url(img/bg1.png) 0px 0px/100% 100%,url(img/bg2.png) 0px 0px/100% 100%;
				animation: bgrun 1s steps(1,end) infinite;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
			}
			@keyframes bgrun{
				0%{background: url(img/bg1.png) 0px 0px/100% 100%;}
				50%{background: url(img/bg2.png) 0px 0px/100% 100%;}
				100%{background: url(img/bg1.png) 0px 0px/100% 100%;}
			}
			.start{
				width: 120px;
				height: 120px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -75px 0px -0px -60px;
			}
			.btn{
				width: 82px;
			    height: 82px;
			    background: rgba(0,0,0,0);
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    margin: -37px 0px 0px -41px;
			    border-radius: 100%;
			    cursor: pointer;
			}
			.pop-up{
				position: fixed;
				width: 100%;
				height: 100vh;
				background: rgba(0,0,0,0.5);
				top: 0;
				left: 0;
				display: none;
				justify-content: center;
				align-items: center;
			}
			.rotate-box{
				width: 1307px;
				height: 1307px;
				background: url(img/packet-light.png) center center;
				animation: rotatebox 10s linear infinite;
			}
			@keyframes rotatebox{
				from{transform: rotate(0deg);}
				to{transform: rotate(360deg);}
			}
			.pop-content{
				width: 360px;
				height: 482px;
				background: url(img/pop_info.png);
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -241px 0px 0px -180px;
			}
			.close_btn{
				position: absolute;
				right: 0;
				top: 0px;
				font-size: 30px;
				color: white;
				border: solid 1px white;
				border-radius: 100%;
				width: 30px;
				height: 30px;
				display: block;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-3.7.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var arr = [];//奖品信息列表
				var roarr = [360,315,270,225,180,135,90,45];//每个奖品正中间的角度
				var prizeArr = [];//奖池
				var ro = 0;//当前旋转角度
				var speed = 1;//旋转速度
				var timer;
				var prize_idx = 0;//中奖奖品的下标
				var prize_ro = 0;//中奖的角度
				//循环把奖品数量放入奖池
				for(var k=0;k<1;k++){
					prizeArr.push(0);
				}
				for(var k=0;k<2;k++){
					prizeArr.push(1);
				}
				for(var k=0;k<3;k++){
					prizeArr.push(2);
				}
				for(var k=0;k<3;k++){
					prizeArr.push(3);
				}
				for(var k=0;k<4;k++){
					prizeArr.push(4);
				}
				for(var k=0;k<5;k++){
					prizeArr.push(5);
				}
				for(var k=0;k<6;k++){
					prizeArr.push(6);
				}
				for(var k=0;k<20;k++){
					prizeArr.push(7);
				}
				$.ajax({
					type:"get",
					url:"js/prize_list.json",
					async:false,
					success:function(res){
						arr = res;
					}
				});
				$(arr).each(function(idx,item){
					var li = $("<li><img src="+item.src +"/><div><h3>"+item.title+"</h3><p>"+item.txt+"</p></div></li>");
					$(".content-list ul").append(li);
				})
				var canvas1 = document.querySelector(".canvas1");
				var canvas2 = document.querySelector(".canvas2");
				canvas1.width = 460;
				canvas1.height = 460;
				canvas2.width = 360;
				canvas2.height = 482;
				var ctx = canvas1.getContext("2d");
				var ctx2 = canvas2.getContext("2d");
				ctx.translate(canvas1.width/2,canvas1.height/2);
				ctx.save();
				ctx.rotate(-112*Math.PI/180);
				for(var i=0;i<8;i++){
					ctx.beginPath();
					ctx.moveTo(0,0);
					ctx.arc(0,0,225,0,45*Math.PI/180,false);
					if(i%2==0){
						ctx.fillStyle = "rgb(255,211,45)";
					}else{
						ctx.fillStyle = "rgb(255,177,0)";
					}
					ctx.fill();
					ctx.rotate(45*Math.PI/180);	
				}
				
				//字体
				ctx.restore();
				ctx.save();
				for(var i=0;i<arr.length;i++){
					ctx.beginPath();
					ctx.fillStyle = "red";
					ctx.font='900  24px/24px "仿宋","微软雅黑","agency fb",arial';
					ctx.textAlign = "center";
					ctx.fillText(arr[i].title,0,-170);
					ctx.rotate(45*Math.PI/180);	
				}
				//图片
				ctx.restore();
				var k = 0;
				fn();
				function fn(){
					var img = new Image();
					img.src =arr[k].src;
					img.onload = function(){
						k++
						ctx.drawImage(img,-30,-150,60,60); 
						if(k<arr.length){
							fn();
						}
						ctx.rotate(45*Math.PI/180);	
					}
				}
				//点击开始
				$(".btn").on("click",canvasRotate);
				function canvasRotate(){
					$(".btn").off();
					if($(".canvas1").attr("data-run")==0){
						//所中奖品
						var idx = Math.floor(Math.random()*prizeArr.length);
						prize_idx = prizeArr[idx];
						prizeArr.splice(idx,1);
						//计算中将奖品的角度，获取奖品正中间的角度，加或减[0,20]的随机数
						var nn = Math.floor(Math.random()*21);//[0,20]
						//随机数大于0.5，则进行加法运算，小于0.5则减法运算
						if(Math.random()>0.5){
							prize_ro = roarr[prize_idx]+nn;
						}else{
							prize_ro = roarr[prize_idx]-nn;
						}
						console.log("奖品下标："+prize_idx+"，中奖的角度："+prize_ro)
						//roarr[prize_idx]
						$(".canvas1").attr("data-run",1)
						$(".start").attr("src","img/pause.png");
						//转盘转起来，速度，慢-->快
						//3s后才能点击
						setTimeout(function(){
							$(".btn").on("click",canvasRotate);
						},3000)
					}else{
						//转盘转起来，速度，快-->慢
						$(".canvas1").attr("data-run",0);
						$(".start").attr("src","img/start.png");					
					}
					cancelAnimationFrame(timer);
					timer = requestAnimationFrame(rotateFn);
				}
				//加速
				function rotateFn(){					
					ro+=speed;
					if(ro>=360){
						ro-=360;
					}
					$(".canvas1").css("transform","rotate("+ro+"deg)");
					if($(".canvas1").attr("data-run")==1){
						if(ro%30<speed){
							speed++;
						}
						if(speed>=10){
							speed=10; 
						}
					}else{
						if(ro%120<speed && speed>2){
							speed--;
						}
						//距离中奖角度等于180时，速度才能降到1，否则最小速度为2
						if(speed==2 && Math.abs(Math.abs(ro-prize_ro)-180)<2){
							speed=1;
						}
						if(speed==1){
							console.log(1);
						}
						if(speed==1 && ro == prize_ro){
							//停止动画
							cancelAnimationFrame(timer);
							$(".btn").on("click",canvasRotate);
							$(".pop-up").css("display","flex");
							canvas2fn();
							return false;
						}	
					}
					timer = requestAnimationFrame(rotateFn);
				}
				//绘制canvas2内容
				function canvas2fn(){
					canvas2.width = 360;
					canvas2.height = 482;
					var img = new Image();
					img.src = arr[prize_idx].src;
					img.onload = function(){
						ctx2.drawImage(img,120,140,120,120); 
					}
					ctx2.fillStyle="white";
					ctx2.font='900  50px/50px "仿宋","微软雅黑","agency fb",arial';
					ctx2.textAlign = "center";
					ctx2.textBaseline="middle";
					ctx2.fillText(arr[prize_idx].title,180,300);
					ctx2.beginPath();
					ctx2.font='900  24px/24px "仿宋","微软雅黑","agency fb",arial';
					ctx2.fillText(arr[prize_idx].txt,180,370);
				}
				//点击×,关闭弹窗
				$(".close_btn").click(function(){
					$(".pop-up").css("display","none");
				})
			})
		</script>
	</head>
	<body>
		<div class="obox">
			<div class="box-l">
				<div class="box-title">奖品列表</div>
				<div class="content-list">
					<ul>
						
					</ul>
				</div>
			</div>
			<div class="box-r">
				<canvas data-run = "0"  class="canvas1"></canvas>
				<img class="start" src="img/start.png" />
				<div class="btn"></div>
			</div>
			<div class="pop-up">
				<div class="rotate-box"></div>
				<div class="pop-content">
					<span class="close_btn">×</span>
					<canvas class="canvas2">
						
					</canvas>
				</div>
			</div>
		</div>
	</body>
</html>